<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="sysOfficeForm" :model="form" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form-item label="组织名称" prop="name">
        <el-col :span="12">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item  label="上级组织">
        <el-col :span="12">
          <el-input v-model="topName" suffix-icon="el-icon-search" @focus="dialogShow" />
        </el-col>
      </el-form-item>
      <el-form-item label="组织状态" prop="status">
        <el-col :span="12">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="正常可用" value="1" />
            <el-option label="停止使用" value="0" />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="组织类型" prop="type">
        <el-col :span="12">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="公司/组织" value="0" :disabled="typeOneDisabled" />
            <el-option label="部门" value="1" :disabled="typeTwoDisabled" />
          </el-select>
        </el-col>
      </el-form-item>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">详细信息</span>
      </div>
      <el-form-item label="负责人">
        <el-col :span="12">
          <el-input v-model="form.leader" />
        </el-col>
      </el-form-item>
      <el-form-item label="办公电话">
        <el-col :span="12">
          <el-input type="number" v-model="form.phone" />
        </el-col>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-col :span="12">
          <el-input v-model="form.email"  @blur="sendEmail" />
        </el-col>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-col :span="24">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-col :span="24">
          <el-input v-model="form.remark" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  :loading="clicked" @click="saveSysOffice('sysOfficeForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import OfficeDialog from '@/components/OfficeDialog'
  import { save } from '@/api/sysOffice'
  export default {
    name:'sysOffice-add',
    filters: {

    },
    components: {
      OfficeDialog
    },
    data() {
      return {
        id: '',
        clicked: false, // 按钮防双击
        topName: '',
        typeOneDisabled: false, // 公司类型是否禁用
        typeTwoDisabled: false, // 部门类型是否禁用
        form: {
          address: '',
          email: '',
          leader: '',
          name: '',
          parentId: '',
          phone: '',
          remark: '',
          status: '1',
          type: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入组织名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择组织状态', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择组织类型', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.id = this.$route.query.rowData.id
      if (!utils.isNull(this.$route.query.rowData.id)) {
        console.log('不是根结点')
        if (this.$route.query.rowData.type == 1) {
          this.typeOneDisabled = true
        }
        this.topName = this.$route.query.rowData.name
        this.form.parentId = this.$route.query.rowData.id
        this.form.type = '1'
      } else {
        console.log('根结点')
        // 没参数代表新增根结点公司
        this.typeTwoDisabled = true
        this.form.type = '0'
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
        if (newVal.name=='sysOffice-add' && newVal.query.rowData.id!=this.id) {
          this.id = newVal.query.rowData.id
          if (!utils.isNull(this.$route.query.rowData.id)) {
            console.log('不是根结点')
            if (this.$route.query.rowData.type == 1) {
              this.typeOneDisabled = true
            }
            this.topName = this.$route.query.rowData.name
            this.form.parentId = this.$route.query.rowData.id
            this.form.type = '1'
          } else {
            console.log('根结点')
            // 没参数代表新增根结点公司
            this.typeTwoDisabled = true
            this.form.type = '0'
          }
        }
      }
    },
    methods: {
      dialogShow() {
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      dialogConfirm(val) {
        this.form.parentId = val.id
        this.topName = val.name
        if (val.type == 0) {
          this.form.type = '1'
          this.typeOneDisabled = false
          this.typeTwoDisabled = false
        } else {
          this.form.type = '1'
          this.typeOneDisabled = true
        }
      },
      saveSysOffice(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            save(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
                EventBus.$emit('sysOffice-add', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                  _this.$router.push({
                    path: '/sysOffice/list'
                  })
                })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      sendEmail: function() {
        var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (this.form.email != '' && !regEmail.test(this.form.email)) {
          this.$message({
            message: '邮箱格式不正确',
            type: 'error'
          })
          this.form.email = ''
        }
      }
    }
  }
</script>
